<template>
  <div id="">
    <ul class="filter">
      <li v-for="(filter,index) in filterArr" :key="filter.key"
      :class="{'active':idx==index}"
      @click="setActive(index)">{{filter.text}}</li>
    </ul>
  </div>
</template>
<script>
export default {
  name: "",
  data: () => ({
    filterArr:[
      {
        text:'默认排序',
        sort:''
      },
      {
        text:'租金从低到高',
        sort:1
      },
      {
        text:'租金从高到低',
        sort:2
      },
      {
        text:'面积从低到高',
        sort:3
      },
      {
        text:'面积从高到低',
        sort:4
      }
    ],
    idx:0,
  }),
  methods: {
    setActive(index) {
      var that = this;
      that.idx = index;
      that.$emit('filterEvent',{
        sort:that.filterArr[that.idx].sort
      })
    }
  }
}
</script>
<style lang="scss" scoped>
 
.filter{
  line-height: 40px;
  padding:0 10px;
  background: white;
  li{
    border-bottom: 1px solid $borderColor;
    &.active{
      color: $greenColor;
    }
  }
}
</style>
